<template>
  <div class="app-container">
    <el-button v-if="!isTag" class="filter-item marginRB10" icon="el-icon-plus" type="primary" @click="handleCreate()">
      添加
    </el-button>
    <!--    <el-button v-if="!isTag" class="marginRB10" type="danger" @click="allDel()" plain>批量删除</el-button>-->
    <el-input v-if="!isTag" v-model="listQuery.lisence_name" class="marginRB10" clearable
              placeholder="请输入资质名称" style="width:200px;"
    ></el-input>
    <el-select v-if="!isTag" v-model="listQuery.status" class="filter-item marginRB10" clearable filterable
               placeholder="请选择状态" style="width: 200px;"
    >
      <el-option v-for="item in flagList2" :key="item.key" :label="item.lab" :value="item.key"></el-option>
    </el-select>
    <el-button v-if="!isTag" class="marginRB10" icon="el-icon-search" type="primary" @click="searchSubmit">搜索
    </el-button>

    <el-table v-if="!isTag" ref="dataList" :data="menuList" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" border row-key="id"
              style="margin-bottom: 20px;"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="id" prop="lisence_id"></el-table-column>
      <el-table-column label="资质名称" prop="lisence_name"></el-table-column>
      <el-table-column label="图标" prop="icon">
        <template slot-scope="scope">
          <el-popover max-width="220" placement="right" trigger="hover">
            <img :src="scope.row.icon" alt="" style="max-width: 200px;max-height: 200px">
            <img slot="reference" :src="scope.row.icon" alt="" style="width: 50px;">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="方形图标" prop="square_icon">
        <template slot-scope="scope">
          <el-popover max-width="220" placement="right" trigger="hover">
            <img :src="scope.row.square_icon" alt="" style="max-width: 200px;max-height: 200px">
            <img slot="reference" :src="scope.row.square_icon" alt="" style="width: 50px;">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort"></el-table-column>
      <el-table-column label="父级名称" prop="parent_name"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? '正常' : '暂停' }}
        </template>
      </el-table-column>
      <el-table-column label="暂停图标" prop="pause_icon">
        <template slot-scope="scope">
          <el-popover placement="left" trigger="hover" width="220">
            <img :src="scope.row.pause_icon" alt="" style="max-width: 200px;max-height: 200px">
            <img slot="reference" :src="scope.row.pause_icon" alt="" style="height: 25px">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="示例图片" prop="image">
        <template slot-scope="scope">
          <el-popover placement="left" trigger="hover" width="220">
            <img :src="scope.row.exp_image" alt="" style="max-width: 200px;max-height: 200px">
            <img slot="reference" :src="scope.row.exp_image" alt="" style="height: 25px">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="图片说明" prop="prompt_image"></el-table-column>
      <el-table-column label="语音说明" prop="prompt_voice"></el-table-column>
      <el-table-column label="价格数组" prop="price_arr"></el-table-column>
      <el-table-column label="查询数组" prop="select_arr"></el-table-column>
      <el-table-column label="回声币/局" prop="unit"></el-table-column>

      <el-table-column label="操作" min-width="330">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" plain size="mini" type="primary" @click="handleUpdate(scope.row)">编辑
          </el-button>
          <el-button v-if="scope.row.status === 1" plain size="mini" type="warning"
                     @click="suspendUpdate(scope.row, 1)"
          >暂停
          </el-button>
          <el-button v-if="scope.row.status === 2" plain size="mini" type="success"
                     @click="suspendUpdate(scope.row, 2)"
          >开启
          </el-button>
          <!--          <cus-del-btn @ok="handleDelete(scope.row)"></cus-del-btn>-->
          <el-button plain size="mini" style="margin-left: 10px;" type="warning" @click="tagUpdate(scope.row)">标签
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination v-if="!isTag" v-show="total>0" :limit.sync="listQuery.perPage" :page.sync="listQuery.page"
                    :total="total" @pagination="getList"
    />

    <div v-if="isTag">
      <el-button class="marginRB10" type="info" @click="gobackBtn()">返回</el-button>
      <el-button :plain="tagType ===2" class="marginRB10" type="success" @click="tagUpdate2(1)">分类标签</el-button>
      <el-button :plain="tagType ===1" class="marginRB10" type="success" @click="tagUpdate2(2)">资质标签</el-button>
      <el-button class="marginRB10" icon="el-icon-plus" type="primary" @click="tagCreate()">新增</el-button>

      <el-table :data="menuList2" border row-key="id" style="margin-bottom: 20px;">
        <el-table-column label="id" prop="tag_id"></el-table-column>
        <el-table-column label="资质名称" prop="lisence_name"></el-table-column>
        <el-table-column label="标签名" prop="tag_name"></el-table-column>
        <el-table-column label="父id" prop="pid"></el-table-column>
        <el-table-column label="级别" prop="level"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            {{ scope.row.status === 1 ? '正常' : '' }}
            {{ scope.row.status === 2 ? '隐藏' : '' }}
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort"></el-table-column>
        <el-table-column label="标签模式" prop="option">
          <template slot-scope="scope">
            {{ scope.row.option === 1 ? '单选' : '' }}
            {{ scope.row.option === 2 ? '多选' : '' }}
            {{ scope.row.option === 3 ? '文本框' : '' }}
          </template>
        </el-table-column>
        <el-table-column label="位置" prop="position">
          <template slot-scope="scope">
            {{ scope.row.position === 1 ? '普通' : '' }}
            {{ scope.row.position === 2 ? '段位置顶' : '' }}
          </template>
        </el-table-column>
        <el-table-column label="是否是筛选条件" prop="is_select">
          <template slot-scope="scope">
            {{ scope.row.is_select === 1 ? '不是' : '' }}
            {{ scope.row.is_select === 2 ? '是' : '' }}
          </template>
        </el-table-column>
        <el-table-column label="添加时间" prop="add_time"></el-table-column>
        <el-table-column label="提示性的文字" prop="description"></el-table-column>
        <el-table-column label="必要性" prop="requirement">
          <template slot-scope="scope">
            {{ scope.row.requirement === 1 ? '必须' : '' }}
            {{ scope.row.requirement === 2 ? '非必须' : '' }}
          </template>
        </el-table-column>
        <el-table-column label="选项名字" prop="select_name"></el-table-column>

        <el-table-column label="操作" min-width="220">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" plain size="mini" type="primary" @click="handleUpdate2(scope.row)">编辑
            </el-button>
            <!--            <cus-del-btn @ok="handleDelete2(scope.row)"></cus-del-btn>-->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
    </div>

    <el-dialog v-dialogDrag :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible"
               @close="handleDialogClose"
    >
      <el-form ref="dataForm" :model="form" :rules="rules" label-position="right" label-width="120px"
               style="width: 400px; margin: 0 auto;"
      >
        <el-form-item label="资质名称" prop="lisence_name">
          <el-input v-model="form.lisence_name" placeholder="请输入资质名称"/>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.sort" placeholder="请输入排序"/>
        </el-form-item>
        <el-form-item label="图片说明" prop="prompt_image">
          <el-input v-model="form.prompt_image" placeholder="请输入图片说明"/>
        </el-form-item>
        <el-form-item label="语音说明" prop="prompt_voice">
          <el-input v-model="form.prompt_voice" placeholder="请输入语音说明"/>
        </el-form-item>
        <el-form-item label="图标地址" prop="icon">
          <img v-if="form.icon&&!form.icon.name" :src="form.icon" alt="" style="max-width: 200px;max-height: 200px">
          <span v-else>{{ form.icon ? form.icon.name : '' }}</span>
          <el-upload
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            action="#"
            class="avatar-uploader"
          >
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="暂停图标地址" prop="pause_icon">
          <img v-if="form.pause_icon&&!form.pause_icon.name" :src="form.pause_icon" alt=""
               style="max-width: 200px;max-height: 200px"
          >
          <span v-else>{{ form.pause_icon ? form.pause_icon.name : '' }}</span>
          <el-upload
            :before-upload="beforeAvatarUpload2"
            :on-success="handleAvatarSuccess2"
            :show-file-list="false"
            action="#"
            class="avatar-uploader"
          >
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="示例图片地址" prop="exp_image">
          <img v-if="form.exp_image&&!form.exp_image.name" :src="form.exp_image" alt=""
               style="max-width: 200px;max-height: 200px"
          >
          <span v-else>{{ form.exp_image ? form.exp_image.name : '' }}</span>
          <el-upload
            :before-upload="beforeAvatarUpload3"
            :on-success="handleAvatarSuccess3"
            :show-file-list="false"
            action="#"
            class="avatar-uploader"
          >
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="方形图标" prop="exp_image">
          <img v-if="form.square_icon&&!form.square_icon.name" :src="form.square_icon" alt=""
               style="max-width: 200px;max-height: 200px"
          >
          <span v-else>{{ form.square_icon ? form.square_icon.name : '' }}</span>
          <el-upload
            :before-upload="beforeAvatarUpload4"
            :on-success="handleAvatarSuccess4"
            :show-file-list="false"
            action="#"
            class="avatar-uploader"
          >
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="价格数组">
          <div style="margin-bottom: 10px;">
            <el-input v-model="addDomainInput1" style="width: 200px;margin-right:6px;"></el-input>
            <el-button type="primary" @click="addDomain(addDomainInput1)">新增</el-button>
          </div>
          <div v-for="i in form.price_arr" :key="i.key" style="margin-bottom: 10px;">
            <el-input v-model="i.value" style="width: 200px;margin-right:6px;"></el-input>
            <el-button type="danger" @click.prevent="removeDomain(i)">删除</el-button>
          </div>
        </el-form-item>
        <el-form-item label="查询数组" prop="select_arr">
          <div style="margin-bottom: 10px;">
            <el-input v-model="addDomainInput2" style="width: 200px;margin-right:6px;"></el-input>
            <el-button type="primary" @click="addDomain2(addDomainInput2)">新增</el-button>
          </div>
          <div v-for="i in form.select_arr" :key="i.key" style="margin-bottom: 10px;">
            <el-input v-model="i.value" style="width: 200px;margin-right:6px;"></el-input>
            <el-button type="danger" @click.prevent="removeDomain2(i)">删除</el-button>
          </div>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入单位"/>
        </el-form-item>
        <el-form-item label="父级" prop="pid">
          <el-select v-model="form.pid" class="filter-item" filterable placeholder="请选择类别" style="width: 280px;">
            <el-option v-for="item in operateList" :key="item.lisence_id" :label="item.lisence_name"
                       :value="item.lisence_id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm">
          确 认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog v-dialogDrag :visible.sync="dialogFormVisible2" title="新增分类标签" @close="handleDialogClose">
      <el-form ref="dataForm2" :model="form2" :rules="rules2" label-position="right" label-width="120px"
               style="width: 400px; margin: 0 auto;"
      >
        <el-form-item label="标签名称" prop="tag_name">
          <el-input v-model="form2.tag_name" placeholder="请输入标签名称"/>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="form2.sort" placeholder="请输入排序"/>
        </el-form-item>
        <el-form-item label="标签模式" prop="option">
          <el-select v-model="form2.option" class="filter-item" filterable placeholder="请选择标签模式" style="width: 280px;">
            <el-option v-for="item in flagList3" :key="item.key" :label="item.lab" :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否是筛选条件" prop="is_select">
          <el-select v-model="form2.is_select" class="filter-item" filterable placeholder="请选择标筛选条件"
                     style="width: 280px;"
          >
            <el-option v-for="item in flagList4" :key="item.key" :label="item.lab" :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="form2.description" placeholder="请输入描述"/>
        </el-form-item>
        <el-form-item label="选项名字" prop="select_name">
          <el-input v-model="form2.select_name" placeholder="请输入选项名字"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible3 = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm2()">
          确 认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog v-dialogDrag :visible.sync="dialogFormVisible3" title="新增资质标签" @close="handleDialogClose">
      <el-form ref="dataForm3" :model="form3" :rules="rules3" label-position="right" label-width="120px"
               style="width: 400px; margin: 0 auto;"
      >
        <el-form-item label="父id" prop="pid">
          <el-select v-model="form3.pid" class="filter-item" filterable placeholder="请选择标筛选条件" style="width: 280px;">
            <el-option v-for="item in operateTagList.tag_list" :key="item.tag_id" :label="item.tag_name"
                       :value="item.tag_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tag_name">
          <el-input v-model="form3.tag_name" placeholder="请输入标签名称"/>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="form3.sort" placeholder="请输入排序"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible3 = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm3">
          确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addTag,
  addTypeTag,
  deleteData,
  delTag,
  listData,
  openData,
  operateList,
  operateTagList,
  saveData,
  saveTag,
  saveTypeTag,
  suspendData,
  tagList,
  updateData
} from '@/api/qualifications/qualificationsList'

export default {
  data() {
    return {
      isTag: false,
      tagType: 1,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10
      },
      menuList: [],
      menuList2: [],
      operateList: [],
      operateTagList: [],
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '增加'
      },
      flagList2: [{ key: '1', lab: '正常' }, { key: '2', lab: '暂停' }],
      flagList3: [{ key: '1', lab: '单选' }, { key: '2', lab: '多选' }, { key: '3', lab: '文本框' }],
      flagList4: [{ key: '1', lab: '不是' }, { key: '2', lab: '是' }],
      form: {
        lisence_id: undefined,
        lisence_name: undefined,
        sort: undefined,
        prompt_image: undefined,
        prompt_voice: undefined,
        icon: undefined,
        square_icon: undefined,
        pause_icon: undefined,
        exp_image: undefined,
        price_arr: [],
        select_arr: [],
        unit: undefined,
        pid: undefined
      },
      addDomainInput1: '',
      addDomainInput2: '',
      rules: {
        lisence_name: [{ required: true, message: '请输入资质名称', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        prompt_image: [{ required: true, message: '请输入图片说明', trigger: 'blur' }],
        prompt_voice: [{ required: true, message: '请输入语音说明', trigger: 'blur' }],
        icon: [{ required: true, message: '请输入图标地址', trigger: 'blur' }],
        pause_icon: [{ required: true, message: '请输入暂停图标地址', trigger: 'blur' }],
        exp_image: [{ required: true, message: '请输入示例图片地址', trigger: 'blur' }],
        price_arr: [{ required: true, message: '请输入价格数组', trigger: 'blur' }],
        select_arr: [{ required: true, message: '请输入查询数组', trigger: 'blur' }],
        unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
        pid: [{ required: true, message: '请输入父级', trigger: 'blur' }]
      },
      form2: {
        lisence_id: undefined,
        tag_name: undefined,
        sort: undefined,
        option: undefined,
        is_select: undefined,
        description: undefined,
        select_name: undefined
      },
      rules2: {
        tag_name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }],
        option: [{ required: true, message: '请输入标签模式', trigger: 'blur' }],
        is_select: [{ required: true, message: '请输入筛选条件', trigger: 'blur' }],
        select_name: [{ required: true, message: '请输入选项名字', trigger: 'blur' }]
      },
      form3: {
        pid: undefined,
        tag_name: undefined,
        sort: undefined
      },
      rules3: {
        tag_name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
    this.getOperateList()
  },
  methods: {
    // 点击查询
    searchSubmit() {
      this.listQuery.page = 1
      this.getList()
    },
    handleAvatarSuccess(res, file) {
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      this.form.icon = file
      // return isJPG && isLt2M;
    },
    handleAvatarSuccess2(res, file) {
    },
    beforeAvatarUpload2(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      this.form.pause_icon = file
      // return isJPG && isLt2M;
    },
    handleAvatarSuccess3(res, file) {
    },
    beforeAvatarUpload3(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      this.form.exp_image = file
      // return isJPG && isLt2M;
    },
    handleAvatarSuccess4(res, file) {
    },
    beforeAvatarUpload4(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      this.form.square_icon = file
      // return isJPG && isLt2M;
    },
    addDomain(val) {
      this.form.price_arr.push({
        value: val,
        key: Date.now()
      })
      this.addDomainInput1 = ''
    },
    removeDomain(item) {
      if (this.form.price_arr.length === 1) {
        this.$message.warning('至少需要一个价格！')
      } else {
        const index = this.form.price_arr.indexOf(item)
        if (index !== -1) {
          this.form.price_arr.splice(index, 1)
        }
      }
    },
    addDomain2(val) {
      this.form.select_arr.push({
        value: val,
        key: Date.now()
      })
      this.addDomainInput2 = ''
    },
    removeDomain2(item) {
      let index = this.form.select_arr.indexOf(item)
      if (index !== -1) {
        this.form.select_arr.splice(index, 1)
      }
    },
    getOperateList() {
      operateList().then(response => {
        this.operateList = response.data
      })
    },
    getList() {
      this.listLoading = true
      for (let key in this.listQuery) {
        this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
      }
      listData(this.listQuery).then(response => {
        this.menuList = response.data.list
        this.total = response.data.meta.total
        this.listLoading = false
      })
    },
    handleCreate(row) {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleUpdate(row) {
      this.form = []
      this.form.lisence_id = row.lisence_id
      this.form.lisence_name = row.lisence_name
      this.form.sort = row.sort
      this.form.prompt_image = row.prompt_image
      this.form.prompt_voice = row.prompt_voice
      this.form.icon = row.icon
      this.form.square_icon = row.square_icon
      this.form.pause_icon = row.pause_icon
      this.form.exp_image = row.exp_image
      this.form.price_arr = JSON.parse(row.price_arr) || []
      this.form.select_arr = JSON.parse(row.select_arr) || []
      this.form.unit = row.unit
      this.form.pid = row.pid

      let arr1 = [], arr2 = []
      this.form.price_arr.forEach((k) => {
        arr1.push({
          value: k,
          key: Date.now()
        })
      })
      this.form.select_arr.forEach((k) => {
        arr2.push({
          value: k,
          key: Date.now()
        })
      })
      this.form.price_arr = arr1
      this.form.select_arr = arr2
// this.form.price_arr)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true

      this.form = Object.assign({}, this.form)
    },
    handleUpdate2(row) {
      if (this.tagType === 1) {
        // this.form2 = []
        this.form2.tag_id = row.tag_id
        this.form2.lisence_id = row.lisence_id
        this.form2.tag_name = row.tag_name
        this.form2.sort = row.sort
        this.form2.option = row.option
        this.form2.is_select = row.is_select
        this.form2.description = row.description
        this.form2.select_name = row.select_name

        this.dialogStatus = 'update'
        this.dialogFormVisible2 = true
      } else {
        // this.form3 = []
        this.form3.tag_id = row.tag_id
        this.form3.pid = row.pid
        this.form3.tag_name = row.tag_name
        this.form3.sort = row.sort

        this.dialogStatus = 'update'
        this.dialogFormVisible3 = true
      }
    },
    suspendUpdate(row) {
      let data = { lisence_id: row.lisence_id }
      if (row.status === 1) {
        suspendData(data).then(response => {
          if (response.code === 200) {
            this.getList()
            this.submitOk('成功')
          } else {
            this.submitFail('失败')
          }
        })
      } else {
        openData(data).then(response => {
          if (response.code === 200) {
            this.getList()
            this.submitOk('成功')
          } else {
            this.submitFail('失败')
          }
        })
      }
    },
    tagUpdate(row) {
      this.$router.push({ path: 'qualificationsTag', query: { lisence_id: row.lisence_id } })
      this.isTag = true
      this.lisence_id = row.lisence_id
      let data = { lisence_id: row.lisence_id, type: this.tagType }
      tagList(data).then(response => {
        this.menuList2 = response.data
      })
    },
    tagUpdate2(tagType) {
      this.isTag = true
      this.tagType = tagType
      let data = { lisence_id: this.lisence_id, type: tagType }
      tagList(data).then(response => {
        this.menuList2 = response.data
      })
      operateTagList(data).then(response => {
        this.operateTagList = response.data
      })
    },
    tagCreate() {

      if (this.tagType === 1) {
        this.dialogFormVisible2 = true
      } else if (this.tagType === 2) {
        this.dialogFormVisible3 = true
      }
      this.dialogStatus = 'create'
    },
    gobackBtn() {
      this.isTag = false
    },
    handleDelete(row) {
      let data = { ids: row.lisence_id }
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList()
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        }
      })
    },
    handleDelete2(row) {
      let data = { tag_ids: row.tag_id }
      delTag(data).then(response => {
        if (response.code === 200) {
          this.tagUpdate2(this.tagType)
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        }
      })
    },
    allDel() {

      let delNum = []
      this.$refs.dataList.selection.forEach((k) => {
        delNum.push(k.lisence_id)
      })
      if (delNum.length === 0) {
        return
      }
      let data = { ids: delNum.toString() }
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList()
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        }
      })
    },
    submitForm() {
      let data = JSON.parse(JSON.stringify(this.form))
      let arr1 = [], arr2 = []
      let oldPrice_arr = this.form.price_arr
      let oldSelect_arr = this.form.select_arr
      if (data.price_arr.length === 1 && data.price_arr[0].value === '') {
      } else {
        for (let i of data.price_arr) {
          if (i.value !== '') {
            arr1.push(i.value)
          }
        }
      }
      if (data.select_arr.length === 1 && data.select_arr[0].value === '') {
      } else {
        for (let i of data.select_arr) {
          if (i.value !== '') {
            arr2.push(i.value)
          }
        }
      }

      this.form.price_arr = arr1
      this.form.select_arr = arr2

      let formData = new FormData()
      for (let item in this.form) {
        if (this.form[item] !== undefined && Array.isArray(this.form[item])) {
          this.form[item].forEach(i => formData.append(`${item}[]`, Number(i)))
        } else if (this.form[item] !== undefined) {
          formData.append(item, this.form[item])
        }
      }

      this.$refs['dataForm'].validate(valid => {
        if (valid && this.dialogStatus === 'create') {
          saveData(formData).then(response => {
            if (response.code === 200) {
              this.getList()
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
              this.dialogFormVisible = false
            } else {
              this.$message({
                message: response.message,
                type: 'error'
              })
              this.form.price_arr = oldPrice_arr
              this.form.select_arr = oldSelect_arr
            }
          })
        } else if (valid && this.dialogStatus === 'update') {
          updateData(formData).then(response => {
            if (response.code === 200) {
              this.getList()
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
              this.dialogFormVisible = false
            } else {
              this.$message({
                message: response.message,
                type: 'error'
              })
              this.form.price_arr = oldPrice_arr
              this.form.select_arr = oldSelect_arr
            }
          })
        }
      })
    },
    submitForm2() {
      this.form2.lisence_id = this.lisence_id
      let formData = new FormData()
      for (let item in this.form2) {
        this.form2[item] === undefined ? '' : formData.append(item, this.form2[item])
      }

      this.$refs['dataForm2'].validate(valid => {
        if (valid && this.dialogStatus === 'create') {
          addTypeTag(formData).then(response => {
            if (response.code === 200) {
              this.tagUpdate2(this.tagType)
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
              this.dialogFormVisible2 = false
            } else {
              this.$message({
                message: response.message,
                type: 'error'
              })
            }
          })
        } else if (valid && this.dialogStatus === 'update') {
          saveTypeTag(formData).then(response => {
            if (response.code === 200) {
              this.tagUpdate2(this.tagType)
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
              this.dialogFormVisible2 = false
            } else {
              this.$message({
                message: response.message,
                type: 'error'
              })
            }
          })
        }
      })
    },
    submitForm3() {
      let formData = new FormData()
      for (let item in this.form3) {
        this.form3[item] === undefined ? '' : formData.append(item, this.form3[item])
      }

      this.$refs['dataForm3'].validate(valid => {
        if (valid && this.dialogStatus === 'create') {
          addTag(formData).then(response => {
            if (response.code === 200) {
              this.tagUpdate2(this.tagType)
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
              this.dialogFormVisible3 = false
            }
          })
        } else if (valid && this.dialogStatus === 'update') {
          saveTag(formData).then(response => {
            if (response.code === 200) {
              this.tagUpdate2(this.tagType)
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
              this.dialogFormVisible3 = false
            }
          })
        }
      })
    },
    resetForm() {
      this.form = {
        lisence_id: undefined,
        lisence_name: undefined,
        sort: undefined,
        prompt_image: undefined,
        prompt_voice: undefined,
        icon: undefined,
        square_icon: undefined,
        pause_icon: undefined,
        exp_image: undefined,
        price_arr: [],
        select_arr: [],
        unit: undefined,
        pid: undefined
      }
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose() {
      if (this.$refs['dataForm']) {
        this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
      }
    }
  }
  // watch: {
  //   'form.price_arr.length'(value) {
  //     if (value < 1) {
  //
  //     }
  //   }
  // }
}
</script>
